<template>
	<w-container class="pa-16" id='sell' :loading="loading">
		<w-navbar id="my-nav" title="以求购价出售" bgColor="#F5F5F5"></w-navbar>
		<view class="select">
			<view class="bg-color-item pa-12 br-12 flex mb-16" v-for="item in info.selected" :key="item.id"
				v-if="item.user_collection_id">
				<w-image radius="8" :src='item.listimg' width="84" height="84"></w-image>
				<view class=" flex-1 pl-12 flex flex-dir-col flex-js-sb">
					<view class="flex flex-dir-col">
						<view class="flex flex-ai-center">
							<view class="text-overflow" style="max-width: 380rpx;">{{item.name &&handleLang(item.name)}}
							</view>
							<!-- <view class="font-size-10 ml-4 pa-3 bg-color-theme font-color-white br-4">
								{{item.pay_way=='huifu'?'钱包A':"易"}}
							</view> -->
							<view class="">
								#<text class=" ">{{item.collection_code}}</text>
								/{{item.total_num}}
							</view>
						</view>
						<text class="font-size-10 nt-4"
							style="color: #606060;">{{handleLang('拥有数量')}}:{{item.count}}</text>
					</view>
					<view class="flex flex-ai-center">

						<!-- <w-icon name="exchange" class="ml-8" size="18" @click='showChoose=true'></w-icon> -->
					</view>
					<view class="flex flex-js-sb flex-ai-end">
						<view class="flex flex-ai-end font-size-12">
							{{handleLang('求购价')}}:
							<view class="font-color-textPrimary flex-ai-end flex">
								<text class="font-size-12">￥</text>
								<text class="font-size-18" style="line-height: 36rpx;">{{item.price}}</text>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<w-radio-account class="mt-8" @changeIncome="income_type=$event"></w-radio-account>
		<view class="mt-8 br-12 bg-color-white plr-16 ptb-24">
			<view class="font-color-textPrimary">
				{{handleLang('服务须知')}}
			</view>
			<view class="flex flex-ai-center mt-12">
				<u-checkbox-group v-model="checkboxValue1" placement="column" size="14">
					<u-checkbox v-for="(item, index) in checkboxList1" :key="index" :label="item.name" :name="item.name"
						label-size="14">
					</u-checkbox>
				</u-checkbox-group>
				<view @click="toXieyi" class="font-color-theme font-size-14">《服务协议》</view>
			</view>
		</view>
		<view class="order-info pa-12 br-12 bg-color-item mt-8">
			<view class="font-color-textPrimary">
				{{handleLang('预计收入')}}
			</view>
			<view class="item">
				<view class="label">
					{{handleLang('总售价')}}：
				</view>
				<view class="value">
					<!-- <text class="font-size-12 font-color-999">{{totalTips && handleLang(totalTips)}}</text> -->
					￥{{info.total_price}}
				</view>
			</view>
			<view class="item">
				<view class="label">
					{{handleLang('综合服务费')}}({{info.platform_service_rate}}%)：
				</view>
				<view class="value" style="color: #EF4B18;">
					￥{{info.platform_service_price}}
				</view>
			</view>
			<view class="item">
				<view class="label">
					{{handleLang('预计收入')}}
				</view>
				<view class="value">
					￥{{info.estimated_income}}
				</view>
			</view>
		</view>

		<view class="pa-12 br-12 bg-color-item mt-16">
			<view class="font-w-500 font-size-14 font-color-textPrimary">
				{{handleLang('以求购价出售说明')}}
			</view>
			<view class="font-color-999 font-size-12 mt-8">
				<view class="">
					{{handleLang('1.成交顺序是以买方发起求购订单的金额由高至低的顺序成交 。')}}
				</view>
				<view class="">
					{{handleLang('2.买方求购订单的付款钱包和卖方收款账户钱包需要一致才可成交，如果不一致会导致无法成交。')}}
				</view>
				<view class="">
					{{handleLang('3.订单一旦成交，不可撤销。')}}
				</view>
			</view>
		</view>
		<view class="action">
			<w-button type="colorfulbuy" :disabled="!checkboxValue1.length || !income_type.length" @click='submit' style="border-radius: 50rpx;">{{handleLang('确认成交')}}</w-button>
			<u-safe-bottom></u-safe-bottom>
		</view>

		<u-popup :show='showChoose' mode='bottom' bgColor='unset'>
			<view class="batch-sell-popup">
				<view class="flex flex-js-sb flex-ai-center">
					<view class="font-color-textPrimary">
						{{handleLang('请选择')}}{{info.selected.length}}{{handleLang('个藏品')}}
					</view>
					<w-icon name='close2' size="24" @click='verifyChoose'></w-icon>
				</view>
				<scroll-view scroll-y="true" class="mt-10" style="height: 732rpx;">
					<view class="item flex" :class="{active:item.check}" v-for="item in info.user_collection_list"
						:key="item.id">
						<view class="font-size-14 font-color-textPrimary text-overflow" style="width: 230rpx;">
							{{item.name &&handleLang(item.name)}}
						</view>
						<view class=" font-size-12 font-color-999 flex-1">
							#
							<text class="font-color-textPrimary font-size-14">{{item.collection_code}}</text>/
							{{item.total_num}}
						</view>
						<w-checkbox v-model="item.check" @change='changeCheck($event,item)'></w-checkbox>
					</view>
				</scroll-view>
				<view>
					<w-button type="dark" shape="circle" @click='verifyChoose'>{{handleLang('确认出售')}}</w-button>
					<u-safe-bottom></u-safe-bottom>
				</view>
			</view>
		</u-popup>
		<w-toast v-model="showTips" contentAlign="center" :title="'￥'+info.total_price"
			:content="handleLang(`您确认以${info.total_price}元出售吗？`)" @action='(e)=>showPwd=e'></w-toast>

		<password-authentification ref="pwdAuth" v-model="showPwd" :price="info.total_price" :payType="incomeType"
			@finish="confim"></password-authentification>
	</w-container>
</template>

<script>
	import {
		getSellBegInfo,
		sell
	} from '@/api/trad/index.js'
	export default {
		data() {
			return {
				showTips: false,
				showPwd: false,
				showChoose: false,
				query: {},
				loading: false,
				income_type:[],  // 收入账号
				info: {
					"selected": [],
					"user_collection_list": []
				},
				checkboxValue1: [],
				// 基本案列数据
				checkboxList1: [{
					name: '我已同意观山',
					disabled: false
				}, ],
			}
		},
		computed: {
			totalTips() {
				let obj = this.info.selected.reduce((pre, cur) => {
					if (pre[cur.price]) {
						pre[cur.price]++
					} else {
						pre[cur.price] = 1
					}
					return pre
				}, {})
				let tips = []
				for (let k in obj) {
					tips.push(`￥${k}x${obj[k]}`)
				}
				if (tips.length) {
					return tips.join("+") + '='
				}
				return null
			},
			incomeType() {
				let paywaySet = this.info.selected.reduce((pre, cur) => {
					pre.add(cur.pay_way)
					return pre
				}, new Set())
				return Array.from(paywaySet)
			}
		},
		onLoad(query) {
			this.query = query;
			this.getInfo()
			// this.initInfo()
		},
		methods: {
			submit() {
				if (!this.checkboxValue1.length) {
					return
				}
				this.showTips = true
			},
			getInfo() {
				getSellBegInfo(this.query).then(res => {
						this.info = res.data;
						this.initInfo()
					}).catch(e => {
						setTimeout(() => {
							this.backPage()
						}, 1500)
					})
					.finally(() => {
						this.loading = false
					})
			},
			toXieyi() {
				uni.navigateTo({
					url: `/pages/public/parse?type=service_agreement&title=服务协议`
				})
			},
			changeCheck(e, item) {
				let checkLen = this.info.user_collection_list.filter(v => v.check).length
				let checkIndex = this.info.selected.findIndex(v => v.user_collection_id == item.id)
				let index = this.info.user_collection_list.findIndex(v => v.id == item.id)
				if (e) {
					if (Number(this.query.number) < checkLen) {
						this.$set(this.info.user_collection_list[index], 'check', false)
						return uni.showToast({
							title: '请先取消一个',
							icon: "none"
						})
					}
					let insetIndex = this.info.selected.findIndex(v => !v.user_collection_id)
					if (insetIndex > -1) {
						this.info.selected[insetIndex].user_collection_id = item.id
						this.info.selected[insetIndex].collection_code = item.collection_code
					}
				} else {
					this.info.selected[checkIndex].user_collection_id = null
					this.info.selected[checkIndex].collection_code = null
				}
			},
			confim(pay_password) {
				let sell_data = this.info.selected.map(v => {
					return {
						buy_id: v.id,
						user_collection_id: v.user_collection_id,
					}
				})

				sell_data = btoa(JSON.stringify(sell_data))
				uni.showLoading({
					title: '出售中'
				})
				sell({
					sell_data,
					pay_way: this.query.pay_way,
					pay_password
				}).then(res => {
					if (res.data && res.data.password_error) {
						return uni.showToast({
							icon: 'none',
							title: res.msg
						})
					}
					uni.showToast({
						title: res.msg
					})
					setTimeout(() => {
						uni.redirectTo({
							url: '/pages/order/list'
						})
					}, 1500)
				})

			},
			initInfo() {
				this.info.user_collection_list.map((v, i) => {
					let has = this.info.selected.find(item => item.user_collection_id == v.id)
					this.$set(this.info.user_collection_list[i], 'check', !!has)
				})
			},
			verifyChoose() {
				let checkLen = this.info.user_collection_list.filter(v => v.check).length
				if (checkLen < Number(this.query.number)) {
					return uni.showToast({
						icon: 'none',
						title: "请选择" + this.query.number + '个'
					})
				}
				this.showChoose = false
			}
		}
	}
</script>

<style lang="scss">
	#sell {
		padding-bottom: calc(140rpx + env(safe-area-inset-bottom))
	}

	.order-info {
		.item {
			@extend .flex, .flex-js-sb, .flex-ai-center, .ptb-16, .font-size-14;

			.label {
				color: #636363
			}

			.value {
				color: #303030;
				font-weight: 600;
			}
		}
	}

	.batch-sell-popup {
		width: 750rpx;
		background: linear-gradient(147deg, #F2F6FF 0%, #FFFFFF 37%);
		@extend .pa-16;
		box-sizing: border-box;
		border-radius: 24rpx 24rpx 0 0;

		.number-box {
			/deep/ input {
				background: none !important;
			}
		}

		.item {
			border-radius: 8rpx;
			border: 1px solid rgba(0, 0, 0, 0.3);
		}

	}

	.action {
		@extend .plr-16, .ptb-7, .bg-color-item;
		box-sizing: border-box;
		width: 750rpx;
		left: 0;
		bottom: 0;
		position: fixed;
	}
</style>